<script setup lang="ts">
import { useGlobalStore } from '@/store/global'
import { useInformationStore } from '@/store/information'
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
import { storeToRefs } from 'pinia'
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { RouterView, useRoute } from 'vue-router'

const { t } = useI18n()
const route = useRoute()
const { categories } = storeToRefs(useInformationStore())
const { width } = storeToRefs(useGlobalStore())
const ctnStatus = ref(false)
watch(
  () => route.params,
  (val) => {
    if (val?.id) {
      ctnStatus.value = true
    }
    else {
      ctnStatus.value = false
    }
  },
  { immediate: true },
)
</script>

<template>
  <div class="root">
    <div
      class="m lh1.5 breadcrumb bg-white1 sticky py20"
      :class="width > 750 ? 'top70' : 'top44'"
    >
      <ElBreadcrumb separator="/" class="lh1.5">
        <ElBreadcrumbItem :to="`${route.meta.rootPath}/${route.params.tag}`">
          {{ categories?.[route.params.tag as string]?.Data?.Name }}
        </ElBreadcrumbItem>
        <ElBreadcrumbItem
          :to="{
            path: `${route.meta.rootPath}/${route.params.tag}/${route.params.categoryId}`,
            query: route.query,
          }"
        >
          {{ route.query.title }}
        </ElBreadcrumbItem>
        <ElBreadcrumbItem v-if="ctnStatus">
          {{ t("information1") }}
        </ElBreadcrumbItem>
      </ElBreadcrumb>
    </div>
    <RouterView />
  </div>
</template>

<style lang="scss" scoped>
.root {
}
</style>
